import React from 'react';
import './index.less';
import { Card, Button, Modal} from 'antd';
function info() {
    Modal.info({
      title: 'This is a notification message',
      content: (
        <div>
          <p>some messages...some messages...</p>
          <p>some messages...some messages...</p>
        </div>
      ),
      onOk() {},
    });
  }
  
  function success() {
    Modal.success({
      content: 'some messages...some messages...',
    });
  }
  
  function error() {
    Modal.error({
      title: 'This is an error message',
      content: 'some messages...some messages...',
    });
  }
  
  function warning() {
    Modal.warning({
      title: 'This is a warning message',
      content: 'some messages...some messages...',
    });
  }
export default class Buttons extends React.Component{ 
    // state = {
    //     showModal1:false,
    //     showModa2:false,
    //     showModal3:false,
    //     showModal4:false
    // }
    // handleOpen = (type) => {
    //     this.setState({
    //        [type]:true
    //     })
    // }
    // handleConfirm = (type) => {
    //     // var a = {
    //     //     confirm : function() {}
    //     // }
    //     // a.confirm()
    //     // a['confirm']
    //     Modal[type]({
    //         title:'确认？',
    //         content:'你确定学会React了吗',
    //         onOk() {
    //             console.log("ok")
    //         },
    //         onCancel() {
    //             console.log('cancel')
    //         }
    //     })
    // }
    state = { 
        visible: false ,
        modal1Visible: false,
        modal2Visible: false,
     };
     setModal1Visible(modal1Visible) {
        this.setState({ modal1Visible });
      }
    
      setModal2Visible(modal2Visible) {
        this.setState({ modal2Visible });
      }

    showModal = () => {
      this.setState({
        visible: true,
      });
    };
  
    handleOk = e => {
      console.log(e);
      this.setState({
        visible: false,
      });
    };
  
    handleCancel = e => {
      console.log(e);
      this.setState({
        visible: false,
      });
    };
    handleConfirm = (type) => {
        Modal[type]({
            title: 'This is a notification message',
            content: (
              <div>
                  <p>你学会react了吗</p>
              </div>
            ),
            onOk() {},
          });
    }
    render() {
        return ( 
            <div>
                {/* <Card title="基础模态框" className="card-wrap">
                    <Button type="primary" onClick={() => this.handleOpen('showModal1')}>Open</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal2')}>自定义页脚</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal3')}>顶部20px弹窗</Button>
                    <Button type="primary" onClick={() => this.handleOpen('showModal4')}>水平居中</Button>
                 </Card>
                 <Card title="信息确认框" className="card-wrap">
                    <Button type="primary" onClick={() => this.handleConfirm('confirm')}>Confirm</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('info')}>Info</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('success')}>Success</Button>
                    <Button type="primary" onClick={() => this.handleConfirm('warning')}>Waring</Button>
                 </Card>
                    <Modal
                        title = "React"
                        visible = {this.state.showModal1}
                        onCancel = {() => {
                            this.setState({
                                showModal1:false
                            })
                        }}
                    >
                            <p>欢迎学习慕课新推出的React高级课</p>
                    </Modal>
                    <Modal
                        title = "React"
                        visible = {this.state.showModal2}
                        okText = "好的"
                        cancelText = "算了"
                        onCancel = {() => {
                            this.setState({
                                showModal2:false
                            })
                        }}
                    >
                            <p>欢迎学习慕课新推出的React高级课</p>
                    </Modal>
                    <Modal
                        title = "React"
                        visible = {this.state.showModal3}
                        style={{top:20}}
                        onCancel = {() => {
                            this.setState({
                                showModal3:false
                            })
                        }}
                    >
                            <p>欢迎学习慕课新推出的React高级课</p>
                    </Modal>
                    <Modal
                        title = "React"
                        visible = {this.state.showModal4}
                        wrapClassName="vertical-center-modal"
                        onCancel = {() => {
                            this.setState({
                                showModal4:false 
                            })
                        }}
                    >
                            <p>欢迎学习慕课新推出的React高级课</p>
                    </Modal>
                 */}
                 <Card title="基础模态框" className="card-wrap">
                        <Button type="primary" onClick={this.showModal}>
                                  Open Modal
                        </Button>
                        <Modal
                            title="基础模态框"
                            visible={this.state.visible}
                            onOk={this.handleOk}
                            onCancel={this.handleCancel}
                            >
                            哈哈哈
                        </Modal>

                        <Button type="primary" onClick={() => this.setModal1Visible(true)}>
                            20px to Top
                        </Button>
                            <Modal
                                title="20px to Top"
                                style={{ top: 20 }}
                                visible={this.state.modal1Visible}
                                onOk={() => this.setModal1Visible(false)}
                                onCancel={() => this.setModal1Visible(false)}
                                >
                                <p>some contents...</p>
                                <p>some contents...</p>
                                <p>some contents...</p>
                            </Modal>
                           
                            <Button type="primary" onClick={() => this.setModal2Visible(true)}>
                                 center
                            </Button>
                            <Modal
                                    title="Vertically centered modal dialog"
                                    centered
                                    visible={this.state.modal2Visible}
                                    onOk={() => this.setModal2Visible(false)}
                                    onCancel={() => this.setModal2Visible(false)}
                                    >
                                    <p>some contents...</p>
                                    <p>some contents...</p>
                                    <p>some contents...</p>
                            </Modal>
                 </Card>
                 <Card title="确认信息" className="card-wrap">
                    <Button type="primary"  onClick={() => this.handleConfirm('info')}>Info</Button>
                    <Button  type="primary" onClick={success}>Success</Button>
                    <Button type="primary" onClick={error}>Error</Button>
                    <Button  type="primary" onClick={warning}>Warning</Button>
                 </Card>
            </div>
        )
    }
}
  